<template>
  <div class="goodsDateil">
    <!-- 轮播图 -->
    <div class="swiper">
      <swiper 
        class="swiper-wrap"
        indicator-dots="true"
        autoplay="true"
        interval="3000"
        duration="500"
        circular="true">
        <block :key="index" v-for="(img,index) in gallery">
          <swiper-item>
            <image :src="img.img_url" mode="widthFix" class="slide-image"/>
          </swiper-item>
        </block>
      </swiper>
    </div>
    <!-- 提示 -->
    <div class="prompt">
      <div>30天无忧退货</div>
      <div>48小时快速退款</div>
      <div>满88元包邮</div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-info">
      <h1>{{goodsInfo.name}}</h1>
      <p>{{goodsInfo.goods_brief}}</p>
      <span>￥{{goodsInfo.retail_price}}</span>
    </div>
    <!-- 选择数量 -->
    <div>
      <i-cell @click="showPop" class="style" title="请选择规格数量" is-link></i-cell>
      <div class="shade" @click="hidePop" v-show="isPop"></div>
      <div class="attr-pop" :class="[isPop ? 'show-Pop' : '' ]">
        <div class="close" @click="hidePop">
          <i-icon type="close" size="20"/>
        </div>
        <div class="attr">
          <img :src="goodsInfo.primary_pic_url">
          <div class="text">
            <span>价格￥46</span>
            <p>请选择数量</p>
          </div>
        </div>
        <div class="count">
          <i-input-number :value="count" min="1" max="5" @change="handleCount" />
        </div>
      </div>
    </div>
    <v-split></v-split>
    <!-- 商品参数 -->
    <div class="goods-parameter">
      <h1>商品参数</h1>
      <div class="content">
        <div class="item" :key="index" v-for="(item, index) in attribute">
          <span>{{item.name}}：</span>
          <span>{{item.value}}</span>
        </div>
      </div>
    </div>
    <v-split></v-split>
    <!-- 商品描述 -->
    <div class="goods-describe">
      <wxParse :content="goodsInfo.goods_desc" />
    </div>
    <v-split></v-split>
    <v-split></v-split>
    <!-- 常见问题 -->
    <div class="FAQ">
     <i-divider size="16" color="#000" lineColor="#bbb">常见问题</i-divider>
      <div class="item" :key="index" v-for="(item, index) in FAQ">
        <h1>{{item.question}}</h1>
        <p>{{item.answer}}</p>
      </div>
    </div>
    <!-- 商品操作栏 -->
    <div class="handle">
      <div class="collection">
        <i-icon size="40" type="collection" />
      </div>
      <div class="cart" @click="linkCart">
        <i-badge class="badge" :count="cartCount" overflow-count="100">
            <view class="demo-badge"></view>
        </i-badge>
        <i-icon size="42" type="publishgoods_fill" />
      </div>
      <div class="buy">
        立即购买
      </div>
      <div class="add-cart" @click="addCart">
        加入购物车
      </div>
    </div>
  </div>
</template>

<script>
import {get, post, showSuccess} from '@/utils'
import vSplit from '@/components/split'
import wxParse from 'mpvue-wxparse'

export default {
  data () {
    return {
      goodsInfo: {},
      gallery: [],
      attribute: [],
      FAQ: [],
      count: 1,
      isPop: false,
      cartCount: 0
    }
  },
  async mounted () {
    const {id} = this.$root.$mp.query
    const { openId } = wx.getStorageSync('userInfo')
    const {goodsInfo, gallery, attribute, FAQ, cartCount} = await get('/weapp/goodsDateil', {id, openId})
    this.goodsInfo = goodsInfo
    this.gallery = gallery
    this.attribute = attribute
    this.FAQ = FAQ
    this.cartCount = cartCount
  },
  components: {
    vSplit,
    wxParse
  },
  methods: {
    handleCount ({target}) {
      this.count = target.value
    },
    showPop () {
      this.isPop = true
    },
    hidePop () {
      this.isPop = false
    },
    async addCart () {
      let user = wx.getStorageSync('userInfo')
      if (user) {
        const res = await post('/weapp/cart/addCart', {
          openId: user.openId,
          goodsId: this.goodsInfo.id,
          count: this.count
        })
        showSuccess(res.msg)
        if (res.state) {
          this.cartCount++
        }
      } else {
        wx.switchTab({
          url: '/pages/me/main'
        })
      }
    },
    linkCart () {
      wx.switchTab({
        url: '/pages/cart/main'
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url("~mpvue-wxparse/src/wxParse.css");

.goodsDateil{
  .swiper{
    .swiper-wrap{
      height: 375px;
      image{
        width: 100%;
      }
    }
  }
  .prompt{
    display: flex;
    width: 100%;
    background: #f5f5f583;
    div{
      flex: 1;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #494949;
      font-weight: 200;
      &:before{
        content: "";
        width: 8rpx;
        height: 8rpx;
        display: inline-block;
        border: 3rpx solid #b4282d;
        border-radius: 50%;
        vertical-align: middle;
        font-size: 16rpx;
        margin-right: 8rpx;
      }
    }
  }
  .goods-info{
    text-align: center;
    padding-bottom: 70rpx;
    border-bottom: 1rpx solid #dddddd;
    h1{
      font-size: 42rpx;
      padding-top: 15rpx;
    }
    p{
      font-size: 24rpx;
      color: #b7b7b7;
      padding: 15rpx 0;
    }
    span{
      font-size: 36rpx;
      color: #b4282d;
    }
  }
  .goods-parameter{
    margin-bottom: 20rpx;
    h1{
      font-size: 44rpx;
      text-align: center;
      padding: 20rpx 0;
    }
    .item{
      min-height: 70rpx;
      line-height: 70rpx; 
      font-size: 32rpx;
      background: #f5f5f583;
      margin-bottom: 20rpx;
      padding: 0 50rpx;
      span{
        color: #000;
        &:last-of-type{
          color: #444444;
          font-size: 30rpx;
        }
      }
    }
  }
  .FAQ{
    padding: 0 20rpx;
    margin-bottom: 120rpx;
    .item{
      padding: 15rpx 0;
      h1{
        font-size: 32rpx;
        &:before{
        content: "";
          width: 12rpx;
          height: 12rpx;
          display: inline-block;
          background: #b4282d;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 8rpx;
        }
      }
      p{
        color: #797979;
        margin-left: 20rpx;
      }
    }
  }
  .handle{
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 10;
    div{
      height: 110rpx;
      float: left;
      line-height: 110rpx;
      text-align: center;
    }
    .collection{
      width: 20%;
      border-right: 1rpx solid #ebebeb;
      box-sizing: border-box;
      border-top: 1rpx solid #ebebeb;
    }
    .cart{
      width: 20%;
      border-right: 1rpx solid #ebebeb;
      border-top: 1rpx solid #ebebeb;
      box-sizing: border-box;
      position: relative;
      .badge{
        position: absolute;
      }
    }
    .buy{
      width: 30%;
      border-top: 1rpx solid #ebebeb;
    }
    .add-cart{
      width: 30%;
      background: #b4282d;
      color: #fff;
    }
  }
  .shade{
    position: fixed;
    bottom: 110rpx;
    left: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.5);
    height: 100vh;
    width: 100vw;
  }
  .attr-pop{
    position: fixed;
    bottom: 110rpx;
    left: 0;
    z-index: 5;
    height: 400rpx;
    width: 100%;
    background: #fff;
    transition: all 400ms ease;
    transform: translateY(100%);
    .close{
      position:absolute;
      top: 10rpx;
      right: 10rpx;
      padding: 15rpx;
    }
    .attr{
      height: 300rpx;
      img{
        width: 250rpx;
        height: 250rpx;
        padding: 25rpx;
        float: left;
      }
      .text{
        float: left;
        line-height: 150rpx;
        margin-left: 50rpx;
        span{
          font-size: 38rpx;
          color: #b4282d;
        }
        p{
          font-size: 34rpx;
        }
      }
    }
    .count{
      display: block;
      vertical-align: middle;
      float: right;
      margin-right: 50rpx;
    }
  }
  .show-Pop{
    transform: translateY(0%) !important;
  }
}
</style>
